import Icon from '@/components/Icon';
import { useAppSelector } from '@/store';
// import { isFollowingsAction } from '@/store/action/articles';
import { SaveOriginCommentAction } from '@/store/action/comment';
// import { Toast } from 'antd-mobile';
import dayjs from 'dayjs';
import { useDispatch } from 'react-redux';
import styles from './index.module.scss';
// import dayjs from 'dayjs';

type Props = {
  comment: any;
};

export default function CommentItem({ comment }: Props) {
  const dispatch = useDispatch();
  const { replys } = useAppSelector((state) => state.comment);

  /** 关注用户 */
  const handleis_followed = async () => {
    // await dispatch(isFollowingsAction(comment.aut_id, comment.is_followed));
    // Toast.show({
    //   icon: 'success',
    //   content: comment.is_followed ? '取消关注成功' : '关注成功',
    // });
  };
  return (
    <div className={styles.root}>
      {/* 评论者头像 */}
      <div className="avatar">
        <img src={comment.aut_photo} alt="" />
      </div>

      <div className="comment-info">
        {/* 评论者名字 */}
        <div className="comment-info-header">
          <span className="name">{comment.aut_name}</span>
          <span className="thumbs-up" onClick={handleis_followed}>
            {comment.like_count}
            <Icon
              type={comment.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'}
            />
          </span>
        </div>

        {/* 评论内容 */}
        <div className="comment-content">{comment.content}</div>

        <div className="comment-footer">
          {/* 回复按钮 */}

          {!replys.results && (
            <span
              className="replay"
              onClick={() => dispatch(SaveOriginCommentAction(comment))}
            >
              {comment.reply_count}回复 <Icon type="iconbtn_right" />
            </span>
          )}
          {/* 评论日期 */}
          <span className="comment-time">{dayjs().from(comment.pubdate)}</span>
        </div>
      </div>
    </div>
  );
}
